<template>
    <div class="top">
        <el-button type="text" @click="back">返回</el-button>
        <div class="content">
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <div class="title">房号信息</div>
                <div class="form">
                    <el-form-item label="单元名称" prop="unitName">
                        <el-input v-model="form.unitName" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="幢号" prop="buildNum">
                        <el-input v-model="form.buildNum"></el-input>
                    </el-form-item>
                    <el-form-item label="楼层号" prop="storeyNum">
                        <el-input v-model="form.storeyNum"></el-input>
                    </el-form-item>
                    <el-form-item label="房号" prop="homeNum">
                        <el-input v-model="form.homeNum"></el-input>
                    </el-form-item>
                    <el-form-item label="住客姓名" prop="homeName">
                        <el-input v-model="form.homeName"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="homeStatus">
                        <el-select v-model="form.homeStatus">
                            <el-option
                                v-for="item in statusList"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-col>
                        <el-tooltip
                            class="item"
                            effect="light"
                            placement="top"
                            with="50"
                        >
                            <div
                                slot="content"
                                with="50"
                                style="line-height: 18px"
                            >
                                可填写房屋的详细信息介绍：<br />
                                1.房屋的基本信息<br />
                                2.房屋的成员信息<br />
                                3.房屋的设备信息<br />
                                4.房屋未来的规划填报
                            </div>
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                        <el-form-item
                            label="房屋信息"
                            prop="homeMessage"
                            style="width: 97%"
                        >
                            <el-input
                                :rows="6"
                                type="textarea"
                                v-model="form.homeMessage"
                                placeholder="请填写房屋信息"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-tooltip
                            class="item"
                            effect="light"
                            placement="top"
                            with="50"
                        >
                            <div
                                slot="content"
                                with="50"
                                style="line-height: 18px"
                            >
                                可对家庭成员的信息实时录入：<br />
                                1.家庭的主要成员<br />
                                2.家庭的主要成员的信息填报<br />
                                3.家庭成员的健康信息状况<br />
                                4.家庭成员每日健康体温检测填写
                            </div>
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                        <el-form-item
                            label="家庭成员"
                            prop="homeSuggestion"
                            style="width: 97%"
                        >
                            <el-input
                                :rows="6"
                                type="textarea"
                                v-model="form.homeSuggestion"
                                placeholder="请填写家庭成员"
                                maxlength="100"
                                show-word-limit
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </div>
                <div class="title">智能设备</div>
                <div class="form">
                    <el-form-item label="洗衣机数量" prop="washnum">
                        <el-input v-model="form.washnum"></el-input>
                    </el-form-item>
                    <el-form-item label="WI-FI名称" prop="wifiname">
                        <el-input v-model="form.wifiname"></el-input>
                    </el-form-item>
                    <el-form-item label="空调数量" prop="airnum">
                        <el-input v-model="form.airnum"></el-input>
                    </el-form-item>
                    <el-form-item label="智能设备状态" prop="smartstatus">
                        <el-select v-model="form.smartstatus">
                            <el-option
                                v-for="item in smartstatusList"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="title">家居设备</div>
                <div class="form">
                    <el-form-item label="书桌数量" prop="homedesk">
                        <el-input v-model="form.homedesk"></el-input>
                    </el-form-item>
                    <el-form-item label="椅子数量" prop="homechair">
                        <el-input v-model="form.homechair"></el-input>
                    </el-form-item>
                    <el-form-item label="衣橱数量" prop="homeclothes">
                        <el-input v-model="form.homeclothes"></el-input>
                    </el-form-item>
                    <el-form-item label="家居设备状态" prop="familystatus">
                        <el-select v-model="form.familystatus">
                            <el-option
                                v-for="item in familystatusList"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div class="submit">
                <el-button type="success" @click="save()">保存</el-button>
                <el-button type="primary" @click="back()">返回</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "numAdd",
    data() {
        return {
            form: {
                homeStatus: "",
                unitName: "",
                storeyNum: "",
                buildNum: "",
                homeNum: "",
                homeName: "",
                homeMessage: "",
                homeSuggestion: "",
                airnum: "",
                wifiname: "",
                washnum: "",
                smartstatus: "",
                homedesk: "",
                homechair: "",
                homeclothes: "",
                familystatus: "",
                homeaddress: "",
            },
            editId: 0,
            statusList: [
                {
                    value: 1,
                    text: "已入住",
                },
                {
                    value: 2,
                    text: "未入住",
                },
            ],
            smartstatusList: [
                {
                    value: 1,
                    text: "完好",
                },
                {
                    value: 2,
                    text: "待维修",
                },
            ],
            familystatusList: [
                {
                    value: 1,
                    text: "完好",
                },
                {
                    value: 2,
                    text: "待维修",
                },
            ],
            rules: {
                unitName: [
                    {
                        required: true,
                        message: "单元名称不能为空",
                        trigger: "blur",
                    },
                ],
                buildNum: [
                    {
                        required: true,
                        message: "幢号不能为空",
                        trigger: "blur",
                    },
                ],
                homeNum: [
                    {
                        required: true,
                        message: "楼层号不能为空",
                        trigger: "blur",
                    },
                ],
                storeyNum: [
                    {
                        required: true,
                        message: "房号不能为空",
                        trigger: "blur",
                    },
                ],
                homeName: [
                    {
                        required: true,
                        message: "住客姓名不能为空",
                        trigger: "blur",
                    },
                ],
                homeStatus: [
                    {
                        required: true,
                        message: "房号状态不能为空",
                        trigger: "change",
                    },
                ],
                homeMessage: [
                    {
                        required: true,
                        message: "房屋信息不能为空",
                        trigger: "blur",
                    },
                ],
                homeSuggestion: [
                    {
                        required: true,
                        message: "家庭成员不能为空",
                        trigger: "blur",
                    },
                ],
                washnum: [
                    {
                        required: true,
                        message: "洗衣机数量不能为空",
                        trigger: "blur",
                    },
                ],
                wifiname: [
                    {
                        required: true,
                        message: "wifi名不能为空",
                        trigger: "blur",
                    },
                ],
                airnum: [
                    {
                        required: true,
                        message: "空调数不能为空",
                        trigger: "blur",
                    },
                ],
                smartstatus: [
                    {
                        required: true,
                        message: "智能设备状态不能为空",
                        trigger: "change",
                    },
                ],
                homedesk: [
                    {
                        required: true,
                        message: "书桌数不能为空",
                        trigger: "blur",
                    },
                ],
                homechair: [
                    {
                        required: true,
                        message: "椅子数不能为空",
                        trigger: "blur",
                    },
                ],
                homeclothes: [
                    {
                        required: true,
                        message: "衣柜数不能为空",
                        trigger: "blur",
                    },
                ],
                familystatus: [
                    {
                        required: true,
                        message: "家居设备状态不能为空",
                        trigger: "change",
                    },
                ],
            },
            dialogTableVisible: false,
            id: 0,
        };
    },

    methods: {
        back() {
            this.$router.go(-1);
        },
        getDetail() {
            this.id = location.href.split("=")[1];
            this.$axiosToken({
                url: "/house/getDetailId",
                method: "get",
                data: { id: this.id },
                success: (result) => {
                    console.log(result);
                    console.log(result);
                    this.form.unitName = result[0].unitname;
                    this.form.buildNum = result[0].buildnum;
                    this.form.storeyNum = result[0].storeynum;
                    this.form.homeNum = result[0].homenum;
                    this.form.homeName = result[0].homename;
                    this.form.homeStatus = result[0].homestatus;
                    this.form.homeMessage = result[0].homemessage;
                    this.form.homeSuggestion = result[0].homesuggestion;
                    this.form.airnum = result[0].airnum;
                    this.form.wifiname = result[0].wifiname;
                    this.form.washnum = result[0].washnum;
                    this.form.smartstatus = result[0].smartstatus;
                    this.form.homedesk = result[0].homedesk;
                    this.form.homechair = result[0].homechair;
                    this.form.homeclothes = result[0].homeclothes;
                    this.form.familystatus = result[0].familystatus;
                },
            });
        },

        // sendName() {
        //     this.$refs.numDialog.dialogTableVisible = true;
        // },
        // showDialog(data) {
        //     this.form.homeName = data[0].username;
        //     console.log(data)
        // },
        getParams() {
            // this.form.homeaddress = this.form.unitName + this.form.buildNum + this.form.homeNum;
            let params = {
                id: this.id,
                unitname: this.form.unitName,
                buildnum: this.form.buildNum,
                storeynum: this.form.storeyNum,
                homenum: this.form.homeNum,
                homename: this.form.homeName,
                homestatus: this.form.homeStatus,
                homemessage: this.form.homeMessage,
                homesuggestion: this.form.homeSuggestion,
                airnum: this.form.airnum,
                wifiname: this.form.wifiname,
                washnum: this.form.washnum,
                smartstatus: this.form.smartstatus,
                homedesk: this.form.homedesk,
                homechair: this.form.homechair,
                homeclothes: this.form.homeclothes,
                familystatus: this.form.familystatus,
                h_id: this.editId,
                // homeaddress: this.form.homeaddress,
            };
            return params;
        },
        save() {
            this.$refs["form"].validate((valid) => {
                this.addLoading = true;
                this.$axiosToken({
                    url: "/house/updatenumList",
                    method: "post",
                    data: this.getParams(),
                    success: (result) => {
                        this.$message({
                            message: "房号设备信息更新成功",
                            type: "success",
                        });
                        setTimeout(() => {
                            this.addLoading = false;
                        }, 1000);
                        this.$router.go(-1);
                    },
                });
            });
            // .catch(() => {
            //   this.$message({
            //     type: "info",
            //     message: "已取消保存",
            //   });
            // });
        },
    },
    mounted() {
        this.getDetail();
    },
};
</script>
<style lang="scss" scoped>
.top ::v-deep {
    > .el-button {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .content {
        .title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            margin-left: 5px;
        }

        .title::before {
            content: "";
            border-left: 5px solid #20a0ff;
            padding-right: 8px;
        }

        .submit {
            margin-right: 40px;
            float: right;
        }

        .form {
            display: flex;
            flex-wrap: wrap;
            width: 96%;
            margin-left: 20px;

            .el-tooltip {
                color: deepSkyblue;
                position: relative;
                left: 75px;
                top: 25px;
            }

            .el-form-item {
                width: 47%;
                padding-left: 3%;

                .el-select {
                    width: 100%;
                }

                .el-input {
                    width: 100%;

                    .el-input__inner {
                        font-size: 14px;
                        height: 36px;
                    }
                }
            }
        }
    }
}
</style>